<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI French Teacher - Recording & Translation</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/french-theme.css') }}">
</head>
<body>
    <div class="container">

        <header>
            <div class="site-logo">
                <span class="eiffel-tower">🗼</span>
                <h1 class="app-title">AI French Teacher</h1>
            </div>
            <div class="french-flag-bar"></div>
            <nav>
                <a href="/" class="active">🎤 录音翻译</a>
                <a href="/vocabulary">📚 单词本</a>
                <a href="/history">📜 历史记录</a>
                {% if user and user.role == 'admin' %}
                <a href="/admin">🔐 管理面板</a>
                {% endif %}
                <a href="#" onclick="handleLogout()" style="color: #EF4135;">🚪 登出</a>
            </nav>
            <div style="text-align: right; font-size: 14px; color: #666; margin-top: 10px;">
                👤 {{ user.username if user else '未登录' }}
            </div>
        </header>


        <main>

            <div class="welcome-message" id="welcomeMessage" style="
                padding: 20px;
                background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
                border-left: 4px solid var(--french-blue);
                border-radius: 8px;
                margin-bottom: 25px;
                font-size: 15px;
                line-height: 1.8;
            ">
                <div style="font-weight: 600; color: var(--french-blue); margin-bottom: 8px;">
                    <span id="greetingTime"></span> <span class="french-decor">⚜️</span>
                </div>
                <div id="greetingText" style="color: #555;"></div>
            </div>


            <div class="control-panel">
                <div class="settings">

                    <div class="setting-group">
                        <label>翻译方向：</label>
                        <select id="direction">
                            <option value="fr2zh">法语 → 中文</option>
                            <option value="zh2fr">中文 → 法语</option>
                        </select>
                    </div>


                    <div class="setting-group">
                        <label>转录模式：</label>
                        <select id="mode">
                            <option value="1">标准模式（快速）</option>
                            <option value="2">增强模式（降噪）</option>
                            <option value="3">HuBERT模式（最高精度）</option>
                        </select>
                    </div>
                </div>


                <div class="recording-controls">
                    <button id="recordBtn" class="record-btn">
                        <span class="record-icon">🎤</span>
                        <span class="record-text">开始录音</span>
                    </button>
                    <button id="uploadBtn" class="upload-btn">
                        <span class="upload-icon">📁</span>
                        <span class="upload-text">上传音频</span>
                    </button>
                    <input type="file" id="audioFileInput" accept="audio/mp3,audio/mpeg,audio/wav,audio/webm" style="display: none;">
                    <div id="recordingStatus" class="recording-status"></div>
                    <div id="uploadStatus" class="upload-status"></div>
                </div>
            </div>


            <div class="results" id="results" style="display: none;">

                <div class="result-section">
                    <h3>📝 原文</h3>
                    <div class="result-content" id="originalText">
                        <p class="placeholder">等待转录...</p>
                    </div>
                </div>


                <div class="result-section">
                    <h3>🌐 翻译</h3>
                    <div class="result-content" id="translatedText">
                        <p class="placeholder">等待翻译...</p>
                    </div>
                </div>


                <div class="result-section">
                    <h3>✨ AI润色</h3>
                    <div class="result-content" id="polishedText">
                        <p class="placeholder">等待AI优化...</p>
                    </div>
                    <button id="addToVocabulary" class="add-btn" style="display: none;">
                        ➕ 添加到单词本
                    </button>
                </div>


                <div class="result-section">
                    <h3>🔊 语音输出</h3>
                    <audio id="audioPlayer" controls style="width: 100%; display: none;">
                        您的浏览器不支持音频播放。
                    </audio>
                    <p id="audioStatus" class="placeholder">正在生成语音...</p>
                </div>


                <div class="result-section stats">
                    <h3>📊 使用统计</h3>
                    <div class="stats-content">
                        <div class="stat-item">
                            <span class="stat-label">讯飞API:</span>
                            <span id="xunfeiUsage" class="stat-value">-</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">通义千问:</span>
                            <span id="qwenUsage" class="stat-value">-</span>
                        </div>
                    </div>
                </div>
            </div>


            <div id="loading" class="loading" style="display: none;">
                <div class="spinner"></div>
                <p id="loadingText">处理中...</p>
            </div>
        </main>


        <footer>
            <p>AI French Teacher v3.0 | 2025</p>
            <p style="margin-top: 10px;">
                <a href="/credits" style="color: var(--french-blue); text-decoration: none; font-weight: 600;">
                    ⚜️ 致谢 / Remerciements
                </a>
            </p>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='js/recorder.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>

